<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-order"> 
			<!-- 头部 -->
			<!-- <view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{getStatusText(orderData.state)}}</view>
						<view class="reason"><text class="reason-text">{{orderData.statetime}}</text></view>
					</view>
					<image :src="$wanlshop.appstc('/order/'+getImg(orderData.state))" class="status-img" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- 详情 -->
			<view class="address cu-list menu-avatar">
				<!-- 物流状态 -->
				<view class="cu-item" @tap="toLogistics(orderData)" v-if="!logisticsType">
					<view class="cu-avatar round wanl-bg-blue"><text class="wlIcon-yunshuzhong"></text></view>
					<view class="content">
						<view>
							<text class="text-cut-2 text-sm wanl-pip">{{orderData.type || ""}} - {{orderData.channel || ""}}</text>
						</view>
						<view class="wanl-gray">
							<text class="text-sm">{{orderData.comments || ""}}</text>
						</view>
					</view>
					<view class="action">
						<text class="wlIcon-fanhui2 wanl-gray"></text>
					</view>
				</view>
				<!-- 地址 -->
				<view class="cu-item">
					<view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
					<view class="content">
						<view>
							<text class="wanl-pip margin-right-sm">{{orderData.receiver || ""}}</text>
							<text class="wanl-gray text-sm">{{orderData.receiverMobile || ""}}</text>
						</view>
						<view class="wanl-pip text-cut-2 text-sm">
							{{orderData.receiveAddress || ""}}
							<text class="margin-left-xs" v-if="orderData.receiveLocation">（{{orderData.receiveLocation}}）附近</text>
						</view>
					</view>
				</view>
			</view>
			<view class="lists bg-white" v-if="orderData.shopbill">
				<view class="shopname text-sm padding-top-bj">
					<text class="wlIcon-dianpu1 margin-right-sm"></text>
					<text class="padding-right-xs wanl-black">{{orderData.user || ""}}</text>
					<text class="wlIcon-fanhuigengduo"></text>
				</view>
				<!-- 价格信息 -->
				<view class="price padding-lr-bj padding-bottom-bj text-sm">
					<view> <text> 快递总价 </text> <text class="text-price"> {{orderData.totalPrice || ""}} </text> </view>
					<view> <text> 下单重量 </text> <text> {{orderData.weight || ""}} </text> </view>
					<view> <text> 实际重量</text> <text> {{orderData.realWeight || ""}} </text> </view>
					<!-- <view> <text> 总价 </text> <text class="text-price"> {{orderData.totalPrice}} </text> </view> -->
					<view class="text-sm" v-if="orderData.totalPrice != 0"> <text> 实付款 </text> <text class="text-price wanl-orange"> {{orderData.totalPrice || ""}} </text> </view>
				</view>
			</view>
			<view class="order bg-white margin-top-bj padding-bj" v-if="orderData.shopbill">
				<view class="title" @tap="toMore">
					<view class="text-sm">快递详情</view>
					<view>
						<text class="wlIcon-fanhui3" v-if="infoMore"></text>
						<text class="wlIcon-fanhui4" v-else></text>
					</view>
				</view>
				<view class="text-sm">
					<view class="item" v-if="orderData.itemName">
						<text class="wanl-gray-dark" style="width: 160rpx">	包裹名：</text>
						<text> {{orderData.itemName || ""}} </text>
					</view>
					<view class="item" v-if="orderData.packageCount">
						<text class="wanl-gray-dark" style="width: 160rpx">	包裹数量：</text>
						<text> {{orderData.packageCount || ""}} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">运单号：</text>
						<text> {{orderData.waybill || ""}} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">商家单号：</text>
						<text> {{orderData.shopbill || ""}} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">创建时间：</text>
						<text> {{orderData.createTime ? $wanlshop.timeFormatS(orderData.createTime) : '——'}} </text>
					</view>
					<block v-if="infoMore">
						<view class="item" v-if="orderData.senderAddress">
							<text class="wanl-gray-dark" style="width: 160rpx">寄件地址：</text>
							<text> {{orderData.senderAddress || ""}} </text>
						</view>
						<view class="item" v-if="orderData.sender">
							<text class="wanl-gray-dark" style="width: 160rpx">寄件人：</text>
							<text> {{orderData.sender || ""}} {{orderData.senderMobile || ""}}</text>
						</view>
						<view class="item" v-if="orderData.insuredValue">
							<text class="wanl-gray-dark" style="width: 160rpx">是否保价：</text>
							<text> {{orderData.insuredValue ? '是' : '否'}}</text>
						</view>
						<!-- <view class="item" v-if="orderData.billType">
							<text class="wanl-gray-dark" style="width: 160rpx">订单类型：</text>
							<text> {{orderData.billType}}</text>
						</view> -->
						<view class="item" v-if="orderData.billRemark">
							<text class="wanl-gray-dark" style="width: 160rpx">订单备注：</text>
							<text> {{orderData.billRemark || '无'}} </text>
						</view>
						<view class="item" v-if="orderData.comments">
							<text class="wanl-gray-dark" style="width: 160rpx">快递员信息：</text>
							<text> {{orderData.comments || ""}} </text>
						</view>
					</block>
				</view>
				<!-- <view class="foot solid-top" >
					<view @tap="toChat(orderData.shop_id)">
						<text class="wlIcon-xiaoxizhongxin text-sm"></text>联系卖家
					</view>
				</view> -->
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderData: {
				order_no: '',
				address: {
					name: '加载中...',
					mobile: '',
					address: '',
					address_name: ''
				},
				logistics: {
					context: '',
					status: '',
					time: ''
				},
				statetime: ''
			},
			logisticsType: false,
			infoMore: false
		};
	},
	onLoad(option) {
		this.loadData(option.data);
	},
	methods: {
		// 获取订单
		async loadData(data) {
			this.kuaidiItem = data ? JSON.parse(data) : {};
			this.$api.get({
				url: '/wanlshop/kuaidi/queryKuaidiInfo',
				// data: data,
				data: {
					id: this.kuaidiItem.id, //37,// 296,
					shopbill: this.kuaidiItem.shopbill, //'263821525128372849',// '263827439298337490',
					waybill: this.kuaidiItem.waybill // 'YT2505108568377',//'DPK202238526307'
				},
				success: res => {
					if(res && res.result) {
						this.orderData = res.result;
					}
					// this.logisticsType = true;					
				}
			});
		},
		getImg(status) {
			return ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png", "img_order_signed3x.png", "img_order_closed3x.png", "img_order_signed3x.png", "img_order_closed3x.png"][status - 1];
		},
		getStatusText(status) {
			return ["等待您付款", "付款成功", "待收货", "待评论", "退款订单", "订单已完成", "交易关闭"][status - 1];
		},
		getRefund(status) {
			return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
		},
		/**
		 * 进入退款
		 * @param {Object} order_id 订单ID 
		 * @param {Object} status 售后状态:0=未退款,1=退款中,2=待退货,3=退款完成
		 */
		onRefund(order_id, refund_status, refund_id, index){
			if (refund_status == 0) { //申请退款
				this.$wanlshop.to(`/pages/user/refund/apply?data=${JSON.stringify({
						order_id: this.orderData.id,
						order_type: 'goods',
						goods: this.orderData.goods[index],
						freight_type: this.orderData.freight_type,
						discount_price: this.orderData.pay.discount_price,
						goods_number: this.orderData.goods.length
					})}`);
			}else{ // 查看详情
				this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
			}
		},
		// 折叠项
		toMore(){
			this.infoMore = !this.infoMore;
		},
		toLogistics(order) {
			let data = {
				id: this.kuaidiItem.id,
				shopbill: order.shopbill,
				waybill: order.waybill,
				itemName: order.itemName
			}
			this.$wanlshop.to(`/pages/order/logistics?data=${JSON.stringify(data)}`);
		}
	}
};
</script>

<style>
	.wanl-order .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}
	
	.wanl-order .header .img-bg {
		width: 100%;
		height: 180rpx;
	}
	
	.wanl-order .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}
	
	.wanl-order .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}
	
	.wanl-order .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}
	
	.wanl-order .header .reason-text {
		padding-right: 12rpx;
	}
	
	.wanl-order .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}
	
	
	
	
	.wanl-order .lists .shopname {
	    margin: 25rpx 25rpx 30rpx 25rpx;
	}
	.wanl-order .lists .price>view{
		display: flex;
		align-items: center;
		justify-content:space-between;
		height: 40rpx;
	}
	
	.wanl-order .lists .cu-btn{
		font-size: 22rpx;
		padding: 0 14rpx;
	}
	
	
	
	
	.cu-list.menu-avatar>.cu-item{
		height: 160rpx;
	}
	.cu-list.menu-avatar>.cu-item .content{
		line-height: 1.4;
	}
	
	.wanl-order .order .title{
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: space-between;
	}
	.wanl-order .order .item{
		display: flex;
		padding-top: 30rpx;
	}
	.wanl-order .order .foot{
		display: flex;
		justify-content: space-around;
		justify-items: center;
		align-items: center;
		padding-top: 25rpx;
		margin-top: 20rpx;
	}
	.wanl-order .order .foot text[class*="wlIcon-"]{
		color: #0081FF;
		margin-right: 10rpx;
		font-size: 32rpx;
	}
	
	
</style>
